<!-- template inhertance -->
<extend name="layout/default"/>

<!-- styles -->
<block name="linkcss">
    <!--日期-->
    <link rel="stylesheet" href="/Public/home/css/bootstrap-datetimepicker.min.css">

    <link rel="stylesheet" href="/Public/home/css/Forms/product/create.css">
</block>

<!-- scripts -->
<block name="linkjs">
    <!--日期-->
    <script src="/Public/home/js/bootstrap-datetimepicker.js"></script>
    <script src="/Public/home/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <!--公用计算金额js-->
    <script src="/Public/home/js/common.js"></script>
</block>

<!-- page title -->
<block name="webtitle">
    <title>创建订货产品出库申请(国际部)</title>
</block>

<!-- navagations -->
<block name="breadcrumb">
    <ol class="breadcrumb breadcrumb-edit">
<!--        <li><a href="/">ATOP</a></li>-->
        <li class="active">创建订货产品出库申请(国际部)</li>
    </ol>
</block>

<!-- main body -->
<block name="content">
    <form action="" class="layui-form">

        <!--基本资料-->
        <div class="layui-form-item">
            <div class="section-grey-table">
                <div class="section-title">基本资料</div>
                <div class="section-body">
                    <table class="table table-bordered basic-info-table">
                        <colgroup>
                            <col width="140">
                            <col>
                            <col width="140">
                            <col>
                            <col width="140">
                            <col>
                        </colgroup>
                        <tbody>
                            <tr>
                                <td class="ti-10">订单号<span>Sales Order</span></td>
                                <td colspan="3">
                                    <input type="text" name="salesOrder" class="layui-input" lay-verify="required" placeholder="例：001-ABC-A">
                                </td>
                                <td class="ti-10">客户合同号<span>Purchase Order</span></td>
                                <td>
                                    <input type="text" name="purchaseOrder" class="layui-input" lay-verify="required" placeholder="客户合同号">
                                </td>
                            </tr>
                            <tr>
                                <td class="ti-10">申请人<span>Sales Person</span></td>
                                <td>
                                    <select name="salesPerson" id="salesPerson" lay-verify="required" lay-search lay-filter="salesPerson">
                                        <option value=""></option>
                                    </select>
                                </td>
                                <td class="ti-10">申请部门<span>Dept</span></td>
                                <td>
                                    <input type="text" name="dept" class="layui-input dept" readonly lay-verify="required" placeholder="申请部门">
                                </td>
                                <td class="ti-10">申请日期<span>Date</span></td>
                                <td>
                                    <input type="text" name="date" class="layui-input date" lay-verify="required" placeholder="申请日期">
                                </td>
                            </tr>
                            <tr>
                                <td class="ti-10">客户名称<span>Customer</span></td>
                                <td colspan="3">
                                    <input type="text" name="customer" class="layui-input" lay-verify="required" placeholder="客户名称">
                                </td>
                                <td class="ti-10">客户邮箱<span>Email</span></td>
                                <td>
                                    <input type="text" name="Email" class="layui-input" lay-verify="required|email" placeholder="客户邮箱">
                                </td>
                            </tr>
                            <tr>
                                <td class="ti-10">付款方式<span>Payment Term</span></td>
                                <td colspan="3">
                                    <select name="paymentTerm" id="paymentTerm" lay-verify="required">
                                        <option value=""></option>
                                    </select>
                                </td>
                                <td class="ti-10">货运方式<span>Carrier</span></td>
                                <td>
                                    <select name="carrier" id="carrier" lay-verify="required">
                                        <option value=""></option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="ti-10">运输条款<span>Shipping Term</span></td>
                                <td>
                                    <select name="shippingTerm" id="shippingTerm" lay-verify="required">
                                        <option value=""></option>
                                    </select>
                                </td>
                                <td class="ti-10">运输账号<span>Shipping Account</span></td>
                                <td>
                                    <input type="text" name="shippingAccount" class="layui-input" lay-verify="required" placeholder="运输账号">
                                </td>
                                <td class="ti-10">运输服务<span>Shipping Service</span></td>
                                <td>
                                    <select name="shippingService" id="shippingService" lay-verify="required">
                                        <option value=""></option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="ti-10">公司地址<span>Bill to</span></td>
                                <td colspan="5">
                                    <input type="text" name="shipTo" class="layui-input" lay-verify="required" placeholder="公司地址">
                                </td>
                            </tr>
                            <tr>
                                <td class="ti-10">发货地址<span>Ship to</span></td>
                                <td colspan="5">
                                    <input type="text" name="billTo" class="layui-input" lay-verify="required" placeholder="发货地址">
                                </td>
                            </tr>
                            <tr>
                                <td class="ti-10">收货人<span>Atten</span></td>
                                <td colspan="3">
                                    <input type="text" name="atten" class="layui-input" lay-verify="required" placeholder="收货人">
                                </td>
                                <td class="ti-10">收货电话<span>Tel</span></td>
                                <td>
                                    <input type="text" name="tel" class="layui-input" lay-verify="required" placeholder="收货电话">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!--产品信息-->
        <div class="layui-form-item">
            <div class="section-grey-table">
                <div class="section-title">产品信息</div>
                <div class="section-body">
                    <table class="table table-bordered product-items-table table-layout-fixed">
                        <thead>
                            <tr>
                                <th width="70">序号<span>NO</span></th>
                                <th width="15%">型号<span>Part Number</span></th>
                                <th width="25%">描述<span>Description</span></th>
                                <th>数量<span>Qty</span></th>
                                <th>单价<span>USD</span></th>
                                <th width="15%">合计<span>Sub-Total</span></th>
                                <th width="15%">计划交付时间<span>Customer Request ETA</span></th>
                                <th width="85">操作<span>Operate</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="ti-10">1</td>
                                <td>
                                    <input type="text" name="INTProduct[1][partTerm]" class="layui-input" lay-verify="required">
                                </td>
                                <td>
                                    <input type="text" name="INTProduct[1][description]" class="layui-input" lay-verify="required">
                                </td>
                                <td>
                                    <input type="text" name="INTProduct[1][qty]" class="layui-input listen" lay-verify="required|number">
                                </td>
                                <td>
                                    <input type="text" name="INTProduct[1][USD]" class="layui-input listen" lay-verify="required">
                                </td>
                                <td>
                                    <input type="text" name="INTProduct[1][sub-total]" readonly="" class="layui-input total-amount">
                                </td>
                                <td>
                                    <input type="text" name="INTProduct[1][customerRequestETA]" class="layui-input date" lay-verify="required">
                                </td>
                                <td class="ti-10">
                                    <button type="button" class="layui-btn layui-btn-small add-detail-item">
                                        <span class="icon-plus"></span>
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-small layui-btn-danger cut-detail-item">
                                        <span class="icon-minus"></span>
                                    </button>
                                </td>
                            </tr>
                            <tr class="total">
                                <td class="ti-10" colspan="3">合计<span>Total</span></td>
                                <td colspan="2">
                                    <input type="text" name="TotalQty" class="layui-input" readonly="">
                                </td>
                                <td >
                                    <input type="text" name="TotalMoney" class="layui-input" readonly="">
                                </td>
                                <td colspan="2">
                                    <input type="text" name="TotalMoneyUp" class="layui-input" readonly="">
                                </td>
                            </tr>
                            <tr class="require">
                                <td class="ti-10">备注<span>Remark</span></td>
                                <td colspan="7">
                                    <textarea name="remark" rows="2" class="layui-textarea" placeholder="备注"></textarea>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!--按钮-->
        <div class="layui-form-item">
            <button type="button" class="layui-btn" lay-submit lay-filter="save">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>

    <!--选择框模板-->
    <script type="text/html" id="select">
        <option value=""></option>
        {{#   layui.each(d, function(index, item){ }}
        <option value="{{ item.value }}">{{ item.name }}</option>
        {{#   }); }}
        {{#   if (d.length === 0) { }}
        无数据
        {{#   } }}
    </script>

    <!--数据渲染-->
    <script>
        $(function () {
            layui.use('laytpl',function () {
                var laytpl =layui.laytpl;

                //申请人
                var data = [
                    {"value":"1","name":"测试1"},
                    {"value":"2","name":"测试2"},
                    {"value":"3","name":"测试3"},
                ];
                var getTpl = select.innerHTML,
                    view = document.getElementById('salesPerson');
                laytpl(getTpl).render(data, function (html) {
                    view.innerHTML = html;
                });

                //付款方式
                var data1 = [
                    {"value":"1","name":"Wire Transfer"},
                    {"value":"2","name":"Net 15"},
                    {"value":"3","name":"Net 30"},
                    {"value":"4","name":"Net 45"},
                    {"value":"5","name":"Net 60"},
                    {"value":"6","name":"Net 90"},
                    {"value":"7","name":"L/C"}
                ];
                var getTpl = select.innerHTML,
                    view1 = document.getElementById('paymentTerm');
                laytpl(getTpl).render(data1, function (html) {
                    view1.innerHTML = html;
                });

                //货运方式
                var data2 = [
                    {"value":"1","name":"DHL"},
                    {"value":"2","name":"Fedex"},
                    {"value":"3","name":"UPS"},
                    {"value":"4","name":"Designated Carrier"},
                    {"value":"5","name":"SF"}
                ];
                var getTpl = select.innerHTML,
                    view2 = document.getElementById('carrier');
                laytpl(getTpl).render(data2, function (html) {
                    view2.innerHTML = html;
                });

                //运输条款
                var data3 = [
                    {"value":"1","name":"FOB"},
                    {"value":"2","name":"Ex-work"},
                    {"value":"3","name":"CIF"},
                    {"value":"4","name":"DDU"},
                    {"value":"5","name":"DDP"}
                ];
                var getTpl = select.innerHTML,
                    view3 = document.getElementById('shippingTerm');
                laytpl(getTpl).render(data3, function (html) {
                    view3.innerHTML = html;
                });

                //运输服务
                var data4 = [
                    {"value":"1","name":"Economic"},
                    {"value":"2","name":"Expedit"}
                ];
                var getTpl = select.innerHTML,
                    view4 = document.getElementById('shippingService');
                laytpl(getTpl).render(data4, function (html) {
                    view4.innerHTML = html;
                });
            })
        });

        //代表国际部的表单
        var type = 2;
    </script>
    <script src="/Public/home/js/Forms/product/create.js"></script>
</block>